<!doctype html>
<html ng-app="myApp">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- for example only -->
    <script src="../assets/vendor/angular/1.6.0/angular.js"></script>
    <!-- end -->
    
    <link rel="stylesheet" type="text/css" href="../assets/mui/css/mui.css"/>
    <script src="../assets/mui/angular/mui-angular.js"></script>
    <script>
      var myApp = angular.module('myApp', ['mui']);

      myApp.controller('ExampleCtrl', function($scope) {
        $scope.valA = 'opt2';
        $scope.valB = 'opt4';
        $scope.valC = 'opt3';
        $scope.valD = 'opt2';
        $scope.valE = 'opt2';
      });
    </script>
  </head>
  <body ng-controller="ExampleCtrl">
    <mui-container>
      <h1>Select</h1>
      <mui-panel>
        <form method="get" action="test">
          <strong>Should have value "Option 2"</strong>
          <mui-select
            name="exampleA"
            ng-model="valA"
            label="Label 1"
          >
            <mui-option label="Option 1" value="opt1"></mui-option>
            <mui-option label="Option 2" value="opt2"></mui-option>
            <mui-option label="Option 3" value="opt3"></mui-option>
            <mui-option label="Option 4" value="opt4"></mui-option>
            <mui-option label="Option 5" value="opt5"></mui-option>
            <mui-option label="Option 6" value="opt6"></mui-option>
            <mui-option label="Option 7" value="opt7"></mui-option>
            <mui-option label="Option 8" value="opt8"></mui-option>
          </mui-select>

          <strong>Should have value "Option 4" and use default UI</strong>
          <mui-select name="exampleB" ng-model="valB" use-default>
            <mui-option label="Option 1" value="opt1"></mui-option>
            <mui-option label="Option 2" value="opt2"></mui-option>
            <mui-option label="Option 3" value="opt3"></mui-option>
            <mui-option label="Option 4" value="opt4"></mui-option>
            <mui-option label="Option 5" value="opt5"></mui-option>
            <mui-option label="Option 6" value="opt6"></mui-option>
            <mui-option label="Option 7" value="opt7"></mui-option>
            <mui-option label="Option 8" value="opt8"></mui-option>
          </mui-select>

          <strong>Should have value "Option 3" and be disabled</strong>
          <mui-select name="exampleC" ng-model="valC" ng-disabled="true">
            <mui-option label="Option 1" value="opt1"></mui-option>
            <mui-option label="Option 2" value="opt2"></mui-option>
            <mui-option label="Option 3" value="opt3"></mui-option>
            <mui-option label="Option 4" value="opt4"></mui-option>
            <mui-option label="Option 5" value="opt5"></mui-option>
            <mui-option label="Option 6" value="opt6"></mui-option>
            <mui-option label="Option 7" value="opt7"></mui-option>
            <mui-option label="Option 8" value="opt8"></mui-option>
          </mui-select>

          <strong>Should have value "Option 2"</strong>
          <mui-select name="exampleD" ng-model="valD">
            <mui-option label="Option 1" value="opt1"></mui-option>
            <mui-option label="Option 2" value="opt2"></mui-option>
            <mui-option label="Option 3" value="opt3"></mui-option>
            <mui-option label="Option 4" value="opt4"></mui-option>
            <mui-option label="Option 5" value="opt5"></mui-option>
            <mui-option label="Option 6" value="opt6"></mui-option>
            <mui-option label="Option 7" value="opt7"></mui-option>
            <mui-option label="Option 8" value="opt8"></mui-option>
          </mui-select>

          <strong>Should jump to item as you type</strong>
          <mui-select name="exampleE" ng-model="valE">
            <mui-option label="A" value="opt1"></mui-option>
            <mui-option label="B" value="opt2"></mui-option>
            <mui-option label="Ba" value="opt3"></mui-option>
            <mui-option label="Bb" value="opt4"></mui-option>
            <mui-option label="C" value="opt5"></mui-option>
            <mui-option label="6" value="opt6"></mui-option>
          </mui-select>

          <mui-button variant="raised">submit</mui-button>
        </form>
      </mui-panel>
    </mui-container>
  </body>
</html>
